<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <link rel="icon" type="image/x-icon" href="https://s01.mifile.cn/favicon.ico">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/macarons2.js"></script>
    <!-- <script src="../js/auto.js"></script> -->
    <script src="../js/axios.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }
    </style>
</head>

<body style="display: flex;">
    <div class="d-flex flex-column flex-shrink-0 p-3 text-white"
        style="width: 280px;height: 100%; background-color: rgb(65, 71, 68);">
        <a class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor"
                class="bi bi-house-door-fill" viewBox="0 0 16 16">
                <path
                    d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z" />
            </svg>
            <span class="fs-5">图书管理系统</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="home.html" class="nav-link text-white" aria-current="page"
                    style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-globe-central-south-asia" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM4.882 1.731a.482.482 0 0 0 .14.291.487.487 0 0 1-.126.78l-.291.146a.721.721 0 0 0-.188.135l-.48.48a1 1 0 0 1-1.023.242l-.02-.007a.996.996 0 0 0-.462-.04 7.03 7.03 0 0 1 2.45-2.027Zm-3 9.674a7.003 7.003 0 0 0 12.659-.906.61.61 0 0 1-.041.001c-.735 0-1.808-1.407-2.365-2.282A.466.466 0 0 0 11.743 8a.454.454 0 0 0-.378.202l-.79 1.187a1 1 0 0 0-.117.238l-.73 2.19a1 1 0 0 1-.949.683h-.058a1 1 0 0 1-.949-.684l-.73-2.189a1 1 0 0 0-.116-.238L6.13 8.197A.78.78 0 0 1 6 7.764v-.455a.5.5 0 0 0-.724-.447.5.5 0 0 1-.523-.047l-1.09-.818a.414.414 0 0 0-.542.624l1.016 1.016a1 1 0 0 1-.152 1.54l-.04.026a1 1 0 0 0-.445.832v.184a1 1 0 0 1-.757.97l-.86.216Z" />
                    </svg>&nbsp;
                    主页
                </a>
            </li>
            
            <li>
                <a href="ReaderMana.html" class="nav-link text-white" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    管理员管理
                </a>
            </li>
            <li>
                <a href="BookDetails.html" class="nav-link text-white" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    读者注册信息表
                </a>
            </li>
            <li>
                <a href="BookBorrow.html" class="nav-link text-white" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    读者借书登记
                </a>
            </li>
            <li>
                <a href="book_Info.html" class="nav-link active" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    图书信息管理
                </a>
            </li>
            <li>
                <a href="BookClass.html" class="nav-link text-white" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    图书分类
                </a>
            </li>
            <li>
                <a href="bookLend.html" class="nav-link text-white" style="display: flex;align-items: center;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                    </svg>&nbsp;
                    图书借阅信息管理
                </a>
            </li>
     
        </ul>
    </div>
    <div class="b-example-divider" style="height: 100%;width:calc(100% - 280px)">
        <div class="header"
            style="padding:0 50px;height: 70px;background-color: #414744;display: flex;justify-content: space-between;align-items: center;">
            <div class="left" style="font-size: 30px;color: #fff;"></div>
            <div class="right" style="width: 50px;height: 50px;border-radius: 50%; position: relative;">
                <span id="nickname" style="position: absolute;top: 0;left: -100px; font-size: 30px;color: #fff;"></span>
                <img style="width: 100%;height: 100%; display: block;" id="avatar" src="../img/avatar.jpg" alt="">
                <button style="display: none;" id="logout">退出</button>
            </div>
        </div>
        <div style="height: 70px;width: 800px;  margin: 100px auto 0 auto; position: absolute;left: 720px;top: -1px;">
            <form style=" position: relative;">
                <input type="text" class="search" id="searchName" style="width: 300px; height: 40px;border-radius: 18px;outline: none;border: 1px solid #ccc;padding-left: 20px;position:absolute;" placeholder="请输入书籍名称">
                <input type="button" onclick="SearchName()" style="height: 35px;width: 35px;position: absolute;background: url('../images/serch.jpg') no-repeat -2px -99px ;background-size: cover; top: 6px;left: 255px;border: none; outline: none;cursor: pointer;">
            </form>
        </div>
        <br>
        <br>
        <br>
        <button class="btn btn-info"data-bs-toggle="modal" data-bs-target="#addbook_info">添加</button>
        <table class="table">
            <thead>
              <tr align="center">
                <th scope="col">编号</th>
                <th scope="col">书籍名称</th>
                <th scope="col">书籍作者</th>
                <th scope="col">出版号</th>
                <th scope="col">类别</th>
                <th scope="col">语言</th>
                <th scope="col">价格</th>
                <th scope="col">上架时间</th>
                <th scope="col">操作</th> 
              </tr>
            </thead>
            <tbody class="table-group-divider">
              
            </tbody>
          </table>
          <button onclick="firstPage()">首页</button>
          <button onclick="upPage()">上一页</button>
          <button onclick="downPage()">下一页</button>
          <button onclick="lastPage()">尾页</button>
          <select style="border:2px solid;height:32px" id="changePageNum">
              <option value="-1">请选择</option>
              <option value="5">5个</option>
              <option value="8">8个</option>
              <option value="10">10个</option>
          </select>

           <!-- 添加的模态框 -->
        <div>
            <!-- 模态框 -->
            <div class="modal fade" id="addbook_info">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">添加图书信息</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <!-- 模态框内容 -->
                        <div class="modal-body">
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">书籍名称</span>
                                <input class="form-control" id="name" placeholder="请输入书籍名称">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">书籍作者</span>
                                <input class="form-control" id="author" placeholder="请输入书籍作者">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">出版号</span>
                                <input class="form-control" id="publish" placeholder="请输入出版号">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">类别</span>
                                <input class="form-control" id="introduction" placeholder="请输入类别">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">语言</span>
                                <input class="form-control" id="language" placeholder="请输入语言">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">价格</span>
                                <input class="form-control" id="price" placeholder="请输入价格">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">上架时间</span>
                                <input class="form-control" id="pubdate" placeholder="请输入上架时间">
                            </label>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" onclick="AddBook_info()">确定</button>
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                            </div>
                            
                        </div>
                    </div>
               


                </div>
            </div>
        </div>
    
    


                     <!-- 修改的模态框 -->
        <div>
            <!-- 模态框 -->
            <div class="modal fade" id="upbookinfo">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">

                        <!-- 模态框头部 -->
                        <div class="modal-header">
                            <h4 class="modal-title">修改图书信息</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <!-- 模态框内容 -->
                        <div class="modal-body">
                            <input type="hidden" id="ubook_id">
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">书籍名称</span>
                                <input class="form-control" id="uname" placeholder="请输入书籍名称">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">书籍作者</span>
                                <input class="form-control" id="uauthor" placeholder="请输入书籍作者">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">出版号</span>
                                <input class="form-control" id="upublish" placeholder="请输入出版号">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">类别</span>
                                <input class="form-control" id="uintroduction" placeholder="请输入类别">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">语言</span>
                                <input class="form-control" id="ulanguage" placeholder="请输入语言">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">价格</span>
                                <input class="form-control" id="uprice" placeholder="请输入价格">
                            </label>
                            <label style="display: flex; align-items: center; margin: 20px 0;">
                                <span style="display: inline-block; width: 50px;">上架时间</span>
                                <input class="form-control" id="upubdate" placeholder="请输入上架时间">
                            </label>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" onclick="UpBook_iInfo()">确定</button>
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
                            </div>                          
                        </div>
                    </div>
                </div>
            </div>
        </div>


                        
          
    </div>                   
    <!-- 引入头部的时间 -->
    <script src="../js/public.js"></script>
    <script src="../js/book_info.js"></script>
    
</body>

</html>